<template>
  <div>
    <!-- <el-menu
      style="position: relative"
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="select"
      :collapse="isCollapse"
      router
      unique-opened
    >
      <el-menu-item
        v-for="item in adminList"
        :key="item.path"
        :index="item.path"
        style="text-align: left"
      >
        <i :class="item.iconPath"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </el-menu> -->
    <el-menu
      style="position: relative; text-align: left"
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="select"
      :collapse="isCollapse"
      router
      unique-opened
    >
      <template v-for="item in adminList">
        <el-menu-item
          :index="item.path"
          :key="item.path"
          v-if="
            item.title != '权限管理' &&
            item.title != '护学岗人员' &&
            item.title != '预警信息管理' &&
            item.title != '考勤配置' &&
            item.title != '护学岗人员（学校）'
          "
        >
          <!-- {{ item.iconPath }} -->
          <i :class="item.iconPath"></i>
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
        <template>
          <el-submenu :index="item.path" :key="item.path" v-if="item.children">
            <template slot="title">
              <!-- {{ item.iconPath }} -->
              <i :class="item.iconPath"></i>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item-group
              v-for="items in item.children"
              :key="items.path"
            >
              <el-menu-item :index="items.path">
                <!-- {{ items.iconPath }} -->
                <i :class="items.iconPath"></i>
                <span slot="title">{{ items.title }}</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </template>
      </template>
    </el-menu>
    <div class="leftImg">
      <img @click="collapse()" src="@/assets/pagesImg/4392.png" alt="" />
    </div>
  </div>
</template>
<script>
import { mapState, Store } from "vuex";
export default {
  name: "APP",
  components: {},
  data() {
    return {
      isCollapse: false,
      show: true,
      activeIndex: "",
      adminList: [
        // {
        //   path: "/admin/admin",
        //   title: "学校信息管理",
        //   iconPath: "icon iconfont icon-a-lujing4830",
        //   // iconPath: "@/assets/pagesImg/zddw.png",
        // },
        // {
        //   path: "/admin/attendanceRate",
        //   title: "志愿者到岗率",
        //   iconPath: "icon iconfont icon-a-lujing4830",
        //   // iconPath: "@/assets/pagesImg/zddw.png",
        // },
        // {
        //   path: "/admin/devicenformation",
        //   title: "设备信息管理",
        //   iconPath: "icon iconfont icon-a-lujing4830",
        //   // iconPath: "@/assets/pagesImg/zddw.png",
        // },
        // {
        //   path: "/admin/basicInformation",
        //   title: "到岗率数据统计",
        //   iconPath: "icon iconfont icon-a-lujing4830",
        // },
        // {
        //   path: "/admin/punchLog",
        //   title: "范围打卡记录",
        //   iconPath: "icon iconfont icon-daka1",
        // },
        // {
        //   path: "/admin/permisson",
        //   title: "权限管理",
        //   iconPath: "icon iconfont icon-daka1",
        //   children: [
        //     {
        //       path: "/admin/permisson/personnelManagement",
        //       title: "用户管理",
        //       iconPath: "icon iconfont icon-daka1",
        //     },
        //     {
        //       path: "/admin/permisson/role",
        //       title: "角色管理",
        //       iconPath: "icon iconfont icon-daka1",
        //     },
        //     {
        //       path: "/admin/permisson/menu",
        //       title: "菜单管理",
        //       iconPath: "icon iconfont icon-daka1",
        //     },
        //     {
        //       path: "/admin/permisson/partment",
        //       title: "部门管理",
        //       iconPath: "icon iconfont icon-daka1",
        //     },
        //   ],
        // },
      ],
      routerList: [
        // {
        //   path: "/PublicSecurity/BasicInformation",
        //   title: "学校基础信息",
        //   iconPath: "el-icon-location",
        // },
        // {
        //   path: "/PublicSecurity/Voluntee",
        //   title: "志愿者管理",
        //   iconPath: "el-icon-phone",
        // },
        // {
        //   path: "/PublicSecurity/AskForLeave",
        //   title: "请假管理",
        //   iconPath: "el-icon-eleme",
        // },
        // {
        //   path: "/PublicSecurity/LeaveApproval",
        //   title: "请假审批流程",
        //   iconPath: "el-icon-location",
        // },
        // {
        //   path: "/PublicSecurity/volunteerApproval",
        //   title: "志愿者审批流程",
        //   iconPath: "el-icon-phone",
        // },
        // {
        //   path: "/PublicSecurity/peopleInfo",
        //   title: "人员信息管理",
        //   iconPath: "el-icon-phone",
        // },
        // {
        //   path: "/PublicSecurity/CheckAttendance",
        //   title: "考勤组管理",
        //   iconPath: "el-icon-phone",
        // },
        // {
        //   path: "/PublicSecurity/shift",
        //   title: "班次管理",
        //   iconPath: "el-icon-phone",
        // },
      ],
      policeList: [
        // {
        //   path: "/layout/warn",
        //   title: "一键报警管理",
        //   iconPath: "icon iconfont icon-alarm-full",
        // },
        // {
        //   path: "/layout/imgWrite",
        //   title: "图文上报管理",
        //   iconPath: "icon iconfont icon-tuwenxiangqing",
        //   // <span class="icon iconfont icon-upload-copy"></span>
        // },
        // {
        //   path: "/layout/visitor",
        //   title: "访客登记管理",
        //   iconPath: "icon iconfont icon-fangke",
        // },
        // {
        //   path: "/layout/UnitManagement",
        //   title: "重点单位管理",
        //   iconPath: "icon iconfont icon-zuoyedanwei",
        // },
        // {
        //   path: "/layout/punchLog",
        //   title: "范围打卡记录",
        //   iconPath: "icon iconfont icon-daka1",
        // },
        // {
        //   path: "/layout/Voluntee",
        //   title: "志愿者管理",
        //   iconPath: "icon iconfont icon-daka1",
        // },
        // {
        //   path: "/layout/permisson",
        //   title: "权限管理",
        //   iconPath: "icon iconfont icon-daka1",
        //   children: [
        //     {
        //       path: "/layout/permisson/personnelManagement",
        //       title: "用户管理",
        //       iconPath: "icon iconfont icon-daka1",
        //     },
        //     {
        //       path: "/layout/permisson/role",
        //       title: "角色管理",
        //       iconPath: "icon iconfont icon-daka1",
        //     },
        //     {
        //       path: "/layout/permisson/menu",
        //       title: "菜单管理",
        //       iconPath: "icon iconfont icon-daka1",
        //     },
        //     {
        //       path: "/layout/permisson/partment",
        //       title: "部门管理",
        //       iconPath: "icon iconfont icon-daka1",
        //     },
        //   ],
        // },
      ],
    };
  },
  watch: {
    $route(to, from) {
      console.log(to, from);
      this.activeIndex = to.path;
      localStorage.getItem("activeIndex");
    },
  },
  computed: {
    ...mapState(["menuList"]),
  },
  mounted() {
    // this.activeIndex = localStorage.getItem("activeIndex");
    // this.activeIndex = this.adminList[0].path;
    // this.$store.commit("SET_MENULIST", [4, 5, 6]);
    // console.log(JSON.parse(localStorage.getItem("MenuList"))[1].router);
    this.activeIndex = JSON.parse(localStorage.getItem("activeIndex"));
    // this.defaultActive = this.$route.path;
    this.initMenu();
  },
  created() {
    // console.log(localStorage.getItem("activeIndex"));
    // this.activeIndex = localStorage.getItem("activeIndex");
  },
  methods: {
    initMenu() {
      let arr1 = [];
      let arr = JSON.parse(localStorage.getItem("MenuList"));
      // console.log(arr);
      for (const key in arr) {
        // console.log(arr);
        arr[key];
        if (arr[key].children) {
          // console.log(arr[key]);
          arr1.push({
            path: arr[key].router,
            title: arr[key].name,
            iconPath: arr[key].icon,
            children: [],
          });
          arr[key].children.forEach((items) => {
            // console.log(items.router.indexOf("warningInformation"));

            // console.log(items);
            arr1.forEach((item) => {
              // console.log(item);
              // console.log(item.path.indexOf("permisson"));
              // console.log(items.router.indexOf("permisson"));
              if (items.router.indexOf("permisson") == 7 && item.children) {
                // console.log(items);
                // console.log(item);
                if (item.path == "/admin/permisson") {
                  // console.log(items);
                  item.children.push({
                    path: items.router,
                    title: items.name,
                    iconPath: items.icon,
                  });
                  return;
                }
              } else if (
                // "/forewarning/peopleWarning"
                items.router.indexOf("Voluntee") == 7 &&
                item.title == "护学岗人员"
              ) {
                item.children.push({
                  path: items.router,
                  title: items.name,
                  iconPath: items.icon,
                });
              } else if (
                items.router.indexOf("forewarning") == 7 &&
                item.title == "预警信息管理"
              ) {
                item.children.push({
                  path: items.router,
                  title: items.name,
                  iconPath: items.icon,
                });
              } else if (
                items.router.indexOf("CheckAttendance") == 7 &&
                item.title == "考勤配置"
              ) {
                item.children.push({
                  path: items.router,
                  title: items.name,
                  iconPath: items.icon,
                });
              } else if (
                items.router.indexOf("VolunteeSchool") == 7 &&
                item.title == "护学岗人员（学校）"
              ) {
                console.log(items.router.indexOf("VolunteeSchool"));
                console.log(items.router.indexOf("护学岗人员（学校）"));
                console.log(item);
                item.children.push({
                  path: items.router,
                  title: items.name,
                  iconPath: items.icon,
                });
              }
            });
          });
          // console.log(arr1);
        } else {
          arr1.push({
            path: arr[key].router,
            title: arr[key].name,
            iconPath: arr[key].icon,
          });
          // console.log(arr1);
        }
      }
      // console.log(arr1);
      // console.log(this.adminList);
      this.adminList = arr1;
    },
    handleOpen() {
      // console.log(key, keyPath);
    },
    handleClose() {
      // console.log(key, keyPath);
    },
    select(index) {
      console.log(index);
      localStorage.setItem("activeIndex", JSON.stringify(index));
      // this.defaultActive = index;
    },
    collapse() {
      this.isCollapse = !this.isCollapse;
      // console.log(this.isCollapse);
    },
  },
};
</script>
<style scoped lang="scss" >
.el-menu-item i {
  margin-right: 5px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 210px;
  // min-height: 400px;
}

.el-menu-item.is-active {
  border-right: 4px #126bff solid;
  color: #126bff;
  font-weight: bolder;
}
.el-menu-item {
  width: auto;
}

.leftImg {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  bottom: 0;
  height: 50px;
  line-height: 50px;
}
.leftImg img {
  width: 20px;
}
</style>
